<template>
    <div>
        <el-steps :active="activeStep" finish-status="success" align-center>
            <el-step
                v-for="(step, index) in steps"
                :key="index"
                :title="step.title"
                :description="step.description"
            />
        </el-steps>

        <!-- 动态显示当前步骤的表单 -->
        <div class="step-content" v-if="activeStep < steps.length">
            <h3>{{ steps[activeStep].title }} 表单</h3>
            <el-form label-width="80px">
                <div v-for="(field, fieldIndex) in steps[activeStep].formData" :key="fieldIndex" class="form-field">
                    <el-form-item :label="'字段 ' + (fieldIndex + 1)">
                        <el-input v-model="field.value" placeholder="请输入内容"></el-input>
                        <el-button type="danger" @click="removeField(activeStep, fieldIndex)">删除</el-button>
                    </el-form-item>
                </div>
                <el-button type="primary" @click="addField(activeStep)">添加字段</el-button>
            </el-form>
        </div>

        <div class="step-buttons">
            <el-button @click="prevStep" :disabled="activeStep === 0">上一步</el-button>
            <el-button type="primary" @click="nextStep" :disabled="activeStep === steps.length - 1">下一步</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeStep: 0,
            steps: [
                { title: '步骤 1', description: '描述内容 1', formData: [{ value: '' }] },
                { title: '步骤 2', description: '描述内容 2', formData: [{ value: '' }] },
                { title: '步骤 3', description: '描述内容 3', formData: [{ value: '' }] },
                { title: '步骤 4', description: '描述内容 4', formData: [{ value: '' }] }
            ]
        };
    },
    methods: {
        nextStep() {
            if (this.activeStep < this.steps.length - 1) {
                this.activeStep++;
            }
        },
        prevStep() {
            if (this.activeStep > 0) {
                this.activeStep--;
            }
        },
        addField(stepIndex) {
            this.steps[stepIndex].formData.push({ value: '' });
        },
        removeField(stepIndex, fieldIndex) {
            if (this.steps[stepIndex].formData.length > 1) {
                this.steps[stepIndex].formData.splice(fieldIndex, 1);
            }
        }
    }
};
</script>

<style scoped>
.step-content {
    margin: 20px 0;
}
.form-field {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.step-buttons {
    display: flex;
    justify-content: space-between;
}
</style>
